<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="resources/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
    <link href="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet"
          type="text/css"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:with="
    ERPConstants = ${T(com.sh.caryr.erp.util.ERPConstants)} ,
    authTarget = ${ERPConstants.AUTH_TARGET_USER} ,
    layout = ${T(com.sh.caryr.erp.custmz.LayoutContainer).getLayout(authTarget, session.user)},
    createAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CREATE},
    deleteAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELETE},
    updateAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_UPDATE}
">
    <th:block th:replace="fragment/header"/>
    <!-- BEGIN CONTAINER -->
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <th:block th:replace="fragment/sidebar"/>
        <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <!-- BEGIN CONTENT BODY -->
            <div class="page-content">
                <!-- BEGIN PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li><a href="index.html" class='msg_home'>主页</a> <i class="fa fa-circle"></i></li>
                        <li><span class='msg_user'>管理</span></li>
                    </ul>
                </div>
                <!-- BEGIN PAGE TITLE-->
                <h1 class="page-title">
                    <span class="msg_title_user">   PageTitle</span>
                    <small class="msg_subtitle_user">sub title</small>
                </h1>
                <!-- BEGIN main content -->
                <div class="row">
                    <!-- BEGIN ===========page level content============= -->
                    <div class="col-md-12">
                        <!-- BEGIN data table-->
                        <div class="portlet box green datatable-portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-list"></i><span class='msg_listTitle'>列表</span>
                                </div>
                                <div class="tools">
                                    <th:block th:if="${ session.isSuperUser||session.authStr.contains(createAuth)}">
                                        <button id="btn_add_entity" class="btn sbold green">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                        <button id="btn_copy_entity" class="btn sbold green">
                                            <i class="fa fa-files-o"></i>
                                        </button>
                                    </th:block>
                                    <button th:if="${ session.isSuperUser||session.authStr.contains(deleteAuth)}"
                                            id="btn_del_entity" class="btn sbold green">
                                        <i class="fa icon-trash"></i>
                                    </button>
                                    <button id="btn_refresh_dt" class="btn sbold green">
                                        <i class="fa icon-refresh"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover dt-responsive" width="100%"
                                       id="dt_user" cellspacing="0">
                                    <thead>
                                    <tr>
                                        <th width="2%"><label
                                                class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                            <input type="checkbox" class="group-checkable"
                                                   data-set="#dt_user .checkboxes"/> <span></span>
                                        </label></th>
                                        <th width='' class='msg_ent_fld_name'></th>
                                        <th width='' class='msg_ent_fld_role'></th>
                                        <th width='' class='msg_ent_fld_phone'></th>
                                        <th width='' class='msg_ent_fld_email'></th>
                                        <th width='' class='msg_ent_fld_address'></th>
                                        <th width='10%' class='msg_ent_fld_updateAt'></th>
                                        <th width='10%' class='msg_ent_fld_createAt'></th>
                                        <th width="2%"></th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- END data table-->
                    </div>

                    <div id="copyModal" class="formModal caryr-bg-blue modal fade" tabindex="-1" data-width="400">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header caryr-bg-blue">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true"></button>
                                    <h4 class="modal-title">复制</h4>
                                </div>
                                <div class="modal-body">
                                    <form role="form">
                                        <div class="form-body">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button id="btn_copy" type="button" data-dismiss="modal" class="btn blue">复制
                                    </button>
                                    <button type="button" data-dismiss="modal"
                                            class="btn grey-salsa btn-outline msg_com_formCancel">取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- BEGIN detail modal form -->
                    <div id="detailModal" class="formModal modal fade" tabindex="-1"
                         role="basic" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true"></button>
                                    <h4 class="modal-title">用户</h4>
                                </div>
                                <div class="modal-body">
                                    <!-- BEGIN Error Message -->
                                    <div class="alert alert-danger hidden" id="form_error_msg">
                                        <button type="button" class="close" data-dismiss="alert"
                                                aria-hidden="true"></button>
                                        <strong class="msg_err_title"></strong>
                                        <span class="msg_err_subTitle"> </span>
                                    </div>
                                    <form role="form" id='user_edit_form'>
                                        <div class="form-body">
                                            <div class='row edit_data'>
                                                <input class='hidden' type='text' name='id'/>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_name caryr-required '></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='text' class='form-control' name='name'
                                                                   maxlength="50" data-valid-required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_role caryr-required '></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <select class="form-control sel_userRole"
                                                                    name="userRoleId"></select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_pwd caryr-required '></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='password' class='form-control' name='password'
                                                                   maxlength="20" data-valid-required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_phone'></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='text' class='form-control' name='phone'
                                                                   maxlength="50">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_email'></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='text' class='form-control' name='email'
                                                                   maxlength="50">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class="col-md-12 control-label caryr-required msg_ent_fld_issuperuser">Company
                                                        Superuser</label>
                                                    <div class="col-md-12">
                                                        <div class="mt-radio-inline">
                                                            <label class="mt-radio active">
                                                                <input type="radio" name="isSuperuser"
                                                                       value="0"/>
                                                                <i class="radio-label msg_ent_fld_no"
                                                                   checked="checked">No</i>
                                                                <span></span>
                                                            </label>
                                                            <label class="mt-radio">
                                                                <input type="radio" name="isSuperuser"
                                                                       value="1"/>
                                                                <i class="radio-label msg_ent_fld_yes ">Yes</i>
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-12 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label msg_ent_fld_address'></label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <textarea class='form-control' name='address'
                                                                      maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div th:if="${ ERPConstants.SYS_SUPER_USERNAME.equals(session.user.name)}"
                                                     class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='col-md-12 control-label caryr-required'>公司代码</label>
                                                    <div class='col-md-12'>
                                                        <div class='input-group'>
                                                            <input type='text' class='form-control' name='coco'
                                                                   maxlength="20" data-valid-required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='row display_data'>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-12 msg_ent_fld_updateAt'></label>
                                                    <div class='col-md-12'>
                                                        <p class='form-control-static' name="updateAt"></p>
                                                    </div>
                                                </div>
                                                <div class='form-group col-md-6 col-sm-12 col-xs-12 has-success '>
                                                    <label class='control-label col-md-12 msg_ent_fld_createAt'></label>
                                                    <div class='col-md-12'>
                                                        <p class='form-control-static' name="createAt"></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn green msg_com_formSave" id="btn_edit_form_save">保存
                                    </button>
                                    <button type="button" data-dismiss="modal"
                                            class="btn grey-salsa btn-outline msg_com_formReturn"
                                            id="btn_edit_form_return">返回
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END   ===========page level content============= -->
                </div>
            </div>
        </div>
    </div>
    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="resources/assets/global/plugins/datatables/datatables.min.js"></script>
    <script src="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
    <script src="resources/assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
    <script src="resources/assets/caryr/caryr.datatable.js" type="text/javascript"></script>
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script th:inline="javascript">
        jQuery(document).ready(function () {

            /*[+
            caryr.lang = [[${session.lang}]];
            +]*/

            var tableId = '#dt_user',
                formId = '#user_edit_form';

            /************ Get Reference object list***/
            caryr.fetchRefList({
                refSelect: [$('.sel_userRole')],
                url: 'api/userRole'
            });
            /***************** dataTable **************/
            var dataTable = caryr.dataTable.create({
                url: "api/user",
                defaultOrderBy: 1,
                tableId: tableId,
                lang: caryr.lang,
                columns: [
                    {data: 'name'},
                    {
                        data: 'userRole',
                        render: function (data) {
                            if (data && data.name) {
                                return data.name;
                            } else {
                                return '';
                            }
                        }
                    },
                    {data: 'phone'},
                    {data: 'email'},
                    {data: 'address'},
                    {data: 'updateAt'},
                    {data: 'createAt'}
                ],
                onViewEvent: function (data) {
                    caryr.refreshEditForm(data, false, formId); //Refresh form
                    $('#detailModal').modal('show');
                }
            });

            $('#btn_add_entity').on('click', function () {	//attach create entity
                caryr.refreshEditForm({}, true, formId);
                $('#detailModal').modal('show');
            });
            /***************** Edit form **************/
            caryr.getFormInstatnce('user_edit_form', {
                url: 'api/user',
                validateForm: function (formResult, form) {
                    if (!formResult) {
                        $('#detailModal').modal('show');
                    } else {
                        $('#detailModal').modal('hide');
                    }
                    return formResult;
                },
                afterSaveSuccess: function (data, action) {
                    var id = action == "POST" ? data.data : data.data.id;
                    if (id) {
                        this.form.find('.edit_data input[name="id"]').val(id);
                        dataTable.draw();
                        caryr.showTab('#tab_li_entity_list');
                    } else {
                        swal({
                            title: $.i18n.prop("msg_com_systemError"),
                            text: "",
                            type: "error"
                        });
                    }
                },
                afterSaveAndNewSuccess: function (data, action) {
                    this.form.find('.edit_data input[name="id"]').val("");
                    dataTable.draw();
                }
            });
            /**************Copy Modal*****************/
            $('#btn_copy_entity').on("click", function () {	//attach copy button
                var selectData = dataTable.rows('.selected').data(); //check selected row
                if (selectData.length == 0) {
                    swal($.i18n.prop("msg_com_noDataSelect"), "", "error");
                    return;
                }
                $('#copyModal').modal('show');
            });

            $('#btn_copy').on('click', function () {
                var selectData = dataTable.rows('.selected').data();
                var formData = caryr.collectFormData('#copyModal');
                var ids = new Array();
                selectData.each(function (e, i) {
                    ids.push(e.id);
                });
                formData.ids = ids;
                copyPojos(formData);
            });
            caryr.attachCopyModalCheckbox($('#copyModal'));

            function copyPojos(data) {
                swal({
                    title: $.i18n.prop("msg_com_confirmCopy"),
                    text: "",
                    type: "info",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true
                }, function () {
                    $.ajax({
                        type: "post",
                        url: "../erp/copy-user",
                        traditional: true, //参数序列化的传统样式
                        data: data,
                        success: function (data) {
                            var msgTxt = $.i18n.prop("msg_com_updateMsg_1");
                            swal({
                                title: msgTxt,
                                text: "",
                                type: "success"
                            }, function () {
                                dataTable.draw();
                            });
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            var msgTxt = $.i18n.prop("msg_com_systemError");
                            swal({
                                title: msgTxt,
                                text: "",
                                type: "error"
                            }, function () {
                                dataTable.draw();
                            });
                        }
                    });
                });
            }
        });
    </script>
</th:block>
</body>
